<template>
  <table border="1" :style="style">
    <thead>
      <tr>
        <th v-for="column in columns">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="data in tableData">
        <td v-for="column in columns" :style="'width:' + column.width + 'px'">
          {{ data[column.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
  <slot v-if="show"></slot>
</template>

<script setup>
import { ref, provide } from "vue";

const show = ref(true);

const { tableData, style } = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  style: {
    type: String,
    default: "",
  },
});

const columns = ref([]);

provide("updateCloumns", updateCloumns);

function updateCloumns(val) {
  columns.value.push(val);
}

console.log("tableData", tableData);
</script>
<style scoped></style>
